<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="ps-image">
<!--    <input type="file" id="file" οnchange="onSelectImage()" style="filter:alpha(opacity=0);opacity:0;width:100%;height:100%;"/>-->
    <form id="img_form" action="/addFood" method="POST" enctype="multipart/form-data">
        <input type="file" id="uploadImg" name="uploadImg">
        <label>
            <input type="text" name="food_name" placeholder="菜品名称不能重复">
            <input type="text" name="food_price" placeholder="菜品价格整数">
            <input type="text" name="food_type" value="菜品类型">
        </label>
        <input type="submit" value="上传">
    </form>
    <span  onclick='upload()'>上传图片</span>
</div>
</body>
<script src="../jquery/jquery-3.5.1.js"></script>
<script>
    function upload(){
        if($('#uploadImg').val() === ''){  //检查input[type=file]是否有值
            // plus.nativeUI.toast('请选择图片再进行上传操作！');
            console.log('请选择图片再进行上传操作！');
        }else{
            let formData = new FormData($("#img_form").get(0));
            console.log(formData);
            $.ajax({
                url: '/addFood',
                data: formData,
                type: "POST",
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function(data) {
                    console.log(JSON.stringify(data));
                },
                error: function(data) {
                    console.log(data.status);
                }
            });
        }
    }
</script>
</html>